<template>
  <div class="page-changeCity">
    <el-row>
      <province />
    </el-row>
    <el-row>
      <hot-city title="热门城市:" :hotList="CtitleList" />
    </el-row>
    <el-row>
      <hot-city title="最近访问:" :hotList="FtitleList" />
    </el-row>
    <el-row>
      <category />
    </el-row>
  </div>
</template>

<script>
import province from '@/components/changeCity/province.vue';
import HotCity from '../components/changeCity/hotCity.vue';
import category from '../components/changeCity/category.vue';
import api from '@/api/index';

export default {
  data() {
    return {
      CtitleList: [],
      FtitleList: [],
    };
  },
  components: {
    province,
    HotCity,
    category,
  },
  created() {
    api.hotList().then((res) => {
      this.CtitleList = res.data.data.map((item) => item.name);
    });
    api.recents().then((res) => {
      this.FtitleList = res.data.data.map((item) => item.name);
    });
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/changecity/iselect.scss';
@import '@/assets/css/changecity/hot.scss';
@import '../assets/css/changecity/categroy.scss';
</style>
